import React, { useState, useEffect } from 'react';
import { Card, Icon } from 'antd';
import { connect } from 'dva';
import dynamic from 'umi/dynamic';
import LoadingComponent from '@/components/PageLoading/index';

// 涉及到的标签组件按需加载
const Undo = dynamic({
  loader: () => import('./Undo'),
  loading: LoadingComponent,
});
const Done = dynamic({
  loader: () => import('./Done'),
  loading: LoadingComponent,
});
const DoneFile = dynamic({
  loader: () => import('./DoneFile'),
  loading: LoadingComponent,
});

function Tab({ size: { height }, goToStep }) {
  const [menuKey, setMenuKey] = useState();
  const [contentList, setContentList] = useState({});

  const tabList = [
    {
      key: 'Undo',
      tab: (
        <span>
          <Icon type="file-search" />
          待办
        </span>
      ),
    },
    {
      key: 'Done',
      tab: (
        <span>
          <Icon type="file-done" />
          已办
        </span>
      ),
    },
    {
      key: 'DoneFile',
      tab: (
        <span>
          <Icon type="audit" />
          已归档
        </span>
      ),
    },
  ];

  const onTabChange = key => {
    const contentMap = {
      Undo: <Undo goToStep={goToStep} />,
      Done: <Done goToStep={goToStep} />,
      DoneFile: <DoneFile goToStep={goToStep} />,
    };
    if (!contentList[key]) {
      contentList[key] = contentMap[key];
    }
    setContentList(contentList);
    setMenuKey(key);
  };

  useEffect(() => {
    onTabChange('Undo');
  }, []);

  // useEffect(() => {
  //   if (props.behavior !== 'disabled') {
  //     onTabChange('Undo');
  //   }
  // }, [props.behavior]);

  return (
    <div>
      <Card
        // className="gb_tabs_samll"
        style={{ width: '100%', minHeight: height }}
        tabList={tabList}
        activeTabKey={menuKey}
        onTabChange={key => {
          onTabChange(key);
        }}
      >
        {Object.keys(contentList).map(key => (
          <div key={key} style={{ display: menuKey === key ? 'block' : 'none' }}>
            {contentList[key]}
          </div>
        ))}
      </Card>
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Tab);
